
import {Row,Col, Tabs, Cascader, Table, Button, Switch, Image, Input, Popconfirm, Select } from 'antd';
import axios from '../../axios';
import { useEffect, useState } from 'react';
import "../../assets/css/Goodsmanger.scss"
import { render } from 'react-dom';


function Goodstype() {
    const [list, setList] = useState([]);
    const [total, setTotal] = useState(0)
    const [page, setPage] = useState(1)
    const [arry, setArry] = useState([])
    const getList = async (status = -1) => {
        let data = await axios.get("/category/list/tree", {
            params: {
                type: 1,
                status,
                name,
                temp: new Date().getTime(),
            }
        })
        // setTotal(child)
        setList(data)

    }

    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
        },
        {
            title: '类型',
            dataIndex: 'type',
            render: (val) => <b>{val == 1 ? "产品分类" : "123"}</b>,// 相当于vue插槽
        },
        {
            title: '分类图标',
            dataIndex: 'extra',
            // ellipsis: true,
            // render: (_,record) => <img style={{ height: "20px", width: "20px" }} src={record.extra} alt="" />,// 相当于vue插槽
            render: (_, record) => <Image
                width={50}
                height={50}
                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            />
        },
        {
            title: '排序',
            dataIndex: 'sort',

        },
        {
            title: '状态',
            dataIndex: 'cost',
            render: (_, record) => < Switch onChange={() => onchangeSwitch(record.id)} checked={record.status} checkedChildren="开启" unCheckedChildren="关闭" />

        },
        {
            title: '操作',
            dataIndex: 'sales',
            // render: (_, record) => <Button onClick={() => delFun(record.id)}>删除</Button>
            render: (_, record) => <Popconfirm
                description="是否要删除该条数据"
                onConfirm={() => confirm(record.id)}
            >
                <Button danger>删除</Button>
            </Popconfirm>
        },
    ];


    const delFun = async (id) => {
        let res = await axios.get("/category/delete", {
            params: {
                id,
                temp: new Date().getTime()
            }

        })
        getList()

    }
    const confirm = (id) => {
        delFun(id)
    };

    //开关
    const updateStatus = async (a) => {
        let res = await axios.get(`/category/updateStatus/${a}`, {
            params: {
                temp: new Date().getTime()
            }
        })
        getList()
    }
    const onchangeSwitch = (row) => {
        updateStatus(row)
        // console.log(row);
        let index = list.findIndex(item => item.id == row)
        console.log(index);
        setList(pre => {
            pre[index].status = !pre[index].status

            console.log(pre[index].id);
            return [...pre]
        })

    }


    let [status, setStatus] = useState(-1)
    //下拉
    const handleChanges = (val) => {
        setStatus(val);
        getList(val);
    }




    //搜索
    const [name, setName] = useState("")
    const searchFun = (e) => {
        getList()
    }
    useEffect(() => {
        getList()
    }, [])

    return (
        <div className='whitebg'>
            <Row gutter={16}>
                <Col span={3}>
                    <Select
                        defaultValue={-1}
                       style={{width:"120px"}}
                        onChange={handleChanges}
                        options={[
                            {
                                value: -1,
                                label: '全部',
                            },
                            {
                                value: 0,
                                label: '不显示',
                            },
                            {
                                value: 1,
                                label: '显示',
                            },
                        ]}
                    />
                </Col>
                <Col span={10}>
                <Input style={{width:"200px"}} placeholder="请输入" value={name} onChange={(e) => setName(e.target.value)} />
                <Button type='primary' onClick={() => searchFun()}>搜索</Button>
                </Col>
            </Row>
           
            <Table columns={columns}
                expandable={{
                    childrenColumnName: "child",
                }}
                dataSource={list}
                rowKey="id"
            />


        </div>
    )
}
export default Goodstype;